const tabData =[{
    title:'文章',
    component:'Article'
},{
    title:'列表',
    component:'List'
}]
export default function Tab(oApp) {
    const oTabWrapper   = document.createElement('div');
    const oPageWrapper  = document.createElement('div');
    oTabWrapper.classList.add('tab-wrapper');
    oPageWrapper.classList.add('page-wrapper');
    tabData.forEach(({title,component},index)=>{
        const oTab = document.createElement('a');
        oTab.href="javascript:void(0);"
        oTab.classList.add('tab');
        oTab.innerText = title;
        oTab.dataset.component = component;
        // 当前默认是第一个0，主动加载第一个组件
       !index && getComponent(component);
      oTabWrapper.appendChild(oTab);
    })
    oTabWrapper.addEventListener('click',(e)=>{
        const target = e.target;
        const tagName = target.tagName.toLowerCase();
        if(tagName === 'a') {
            const componentName = target.dataset.component;
            console.log(componentName);
            oPageWrapper.innerHTML = '';// 置空
            getComponent(componentName);
        }
    },false)
    async function getComponent(componentName) {
        const component = await import(`./module-${componentName}.js`);
        // 异步加载的模块是一个函数，会默认放到default属性上
        const dom = await component.default();
        console.log(dom);
        oPageWrapper.appendChild(dom);
    }
    return{
        oTabWrapper,
        oPageWrapper
    }
}